<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />

    <style>
      #thridHeader {
        background: #2997e4;
        padding-top: 20px;
        position: fixed;
        width: 100%;
        top:0;
      }
      #thridHeader .titlebar {
        background: #2997e4;
      }
      #thridHeader .aui-searchbar-cancel {
        color: #fff;
        width: 2rem;
      }
     .aui-searchbar-input img {
       display: inline-block;
       vertical-align: top;
       width: 20px;
       margin-top: 7px;
       margin-right: 10px;
     }

 		.darktitle {
 			padding: 0.5rem 1rem;
 			font-size: 0.8rem;
 			color: #333;
 			font-weight: bold;
 			border-bottom: 1px solid #dcdcdc;
      margin-top: 70px;
 		}

 		ul.darkList {}
 		ul.darkList li {
 			padding: 0.5rem 1rem;
 			font-size: 0.7rem;
 			color: #333;
 			border-bottom: 1px solid #dcdcdc;
 		}
 		ul.hotSearch {}
 		ul.hotSearch li {
 			padding: 5px;
 			font-size: 0.7rem;
 			color: #333;
      border-radius: 5px;
      border: 1px solid #e8e8e8;
      background: #e8e8e8;
      margin: 5px;
      display: inline-block;
 		}
 		ul.darkList li span {}
 		ul.darkList li span.red {
 			color: #f00;
 		}
    ul.darkList li i {
      float: right;
      font-style: normal;
    }
    </style>
  </head>
  <body>
    <div id="app">
      <div id="thridHeader">
        <div class="aui-searchbar titlebar">
          <div class="aui-searchbar-input aui-border-radius" tapmode onclick="">
            <img src="../image/ss@2x.png" alt="">
            <form>
              <input type="search" placeholder="请输入搜索内容" id="search-input" v-model="keywords" @input="search">
            </form>
          </div>
          <div class="aui-searchbar-cancel" tapmod onclick="goback()">取消</div>
        </div>
      </div>

      	<div class="darktitle" v-if="keywords == ''">热门搜索</div>
      	<div class="darktitle" v-else>搜索结果</div>
      	<ul class="hotSearch" v-if="keywords == ''">
      		<li v-for="item in hotSearch" @click="openDetail(item.type, item.newsid, item.title)">{{item.title}}</li>
      	</ul>
        <div v-else>
          <ul class="darkList" v-if="type == 'all'">
            <li v-if="dataList.length <= 0" style="text-align:center;">暂无搜索结果</li>
        		<li
              v-for="(item, index) in dataList"
              :key="index"
              @click="openDetail(item.type, item.id || item.id, item.title)"
              v-else><span>{{index + 1}}.</span>{{item.title}} <i>{{item.keywords}}</i></li>
        	</ul>
        	<ul class="darkList" v-else-if="type == 'paper'">
            <li v-if="dataList.length <= 0" style="text-align:center;">暂无搜索结果</li>
        		<li
              v-for="(item, index) in dataList"
              :key="index"
              @click="openDetail(2, item.id, item.title)"
              v-else><span>{{index + 1}}.</span>{{item.title}}</li>
        	</ul>
        	<ul class="darkList" v-else-if="type == 'article'">
            <li v-if="dataList.length <= 0" style="text-align:center;">暂无搜索结果</li>
        		<li
              v-for="(item, index) in dataList"
              :key="index"
              @click="openDetail(1, item.id, item.title)"
              v-else><span>{{index + 1}}.</span>{{item.title}} <i>{{item.keywords}}</i></li>
        	</ul>
        </div>

    </div>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript" src="../script/utils.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
  <script type="text/javascript">
   function goback () {
      api.closeWin({name:'search'});
    }

    // 完成首页初始化
  apiready = function(){
    var app = new Vue({
			el: '#app',
			data: {
        dataList: [],
        keywords: '',
        type: api.pageParam.type,
        url: '',
        page: '',
        cid: 0,
        hotSearch: []
			},
			created: function() {
        var $_this = this
        api.ajax({
				  url: window.Url.hotSearch,
					timeout: 300,
				}, function(ret, err) {
				    if (ret) {
				        // api.alert({ msg: JSON.stringify(ret) });
								$_this.hotSearch = ret.data
				    } else {
				        api.alert({ msg: JSON.stringify(err) });
				    }
				})
        if ($_this.type == 'all') {
          $_this.page = ''
          $_this.url = window.Url.search
        } else if ($_this.type == 'paper') {
          $_this.page = '1'
          $_this.url = window.Url.searchPaper
        } else if ($_this.type == 'article') {
          $_this.cid = api.pageParam.type
          $_this.page = '1'
          $_this.url = window.Url.searchArticle + $_this.cid + '/'
        }
			},
			methods: {
        search: function () {
          var $_this = this;
  				api.ajax({
  				  url: $_this.url + $_this.page,
  					timeout: 300,
            method: 'post',
            headers: {
              'Content-Type': 'application/json',
            },
            data: {
              body: {
                keywords: $_this.keywords
              }
            }
  				}, function(ret, err) {
  				    if (ret) {
                if ($_this.type == 'all') {
                  if (ret.data == null) {
                    $_this.dataList = []
                  } else {
                    $_this.dataList = ret.data
                  }
                } else {
                  if (ret.data == null) {
                    $_this.dataList = []
                  } else {
                    $_this.dataList = ret.data.newsList
                  }
                  if ($_this.type == 'paper' && ret.totalpage > 1 || $_this.type == 'article' && ret.totalpage > 1) {
                    for (var i = 2; i < ret.totalpage; i++) {
                      $_this.page = i
                      api.ajax({
                        url: $_this.url + $_this.page,
                        timeout: 300,
                        method: 'post',
                        headers: {
                          'Content-Type': 'application/json',
                        },
                        data: {
                          body: {
                            keywords: $_this.keywords
                          }
                        }
                      }, function (r, e) {
                        $_this.dataList = $_this.dataList.concat(r.data.newsList)
                      })
                    }
                  }
                }
  				    } else {
  				        api.alert({ msg: JSON.stringify(err) });
  				    }
  				})
        },

        openDetail: function (type, id, title) {
          if (type == 1) { // 文章
            //index_detail_xc
            api.openWin({
  						name: 'index_detail_xc',
  						pageParam: {
  							name: 'index_detail_xc',
  							title: '详情',
  							id: id
  						},
  						url: './first_frame/index_detail_xc.html',
  						delay: 200,
  						bounces: false
  					});
          } else if (type == 2) { // 论文
            //index_detail_lw
            api.openWin({
  						name: 'index_detail_lw',
  						pageParam: {
  							name: 'index_detail_lw',
  							title: '论文详情',
  							id: id
  						},
  						url: './first_frame/index_detail_lw.html',
  						delay: 200,
  						bounces: false
  					});
          } else if (type == 3) { // 活动
            //index_detail_hd
            api.openWin({
  						name: 'index_detail_hd',
  						pageParam: {
  							name: 'index_detail_hd',
  							title: '活动详情',
  							id: id
  						},
  						url: './first_frame/activitydetails.html',
  						delay: 200,
  						bounces: false
  					});
          } else if (type == 4) { // 科技需求
            //index_cx_need
            api.openWin({
  						name: 'index_cx_need',
  						pageParam: {
  							name: 'index_cx_need',
  							title: '需求详情',
  							id: id
  						},
  						url: './first_frame/index_cx_need.html',
  						delay: 200,
  						bounces: false
  					});
          } else if (type == 5) { // 科研成果
            //index_cx_need
            api.openWin({
  						name: 'index_cx_need',
  						pageParam: {
  							name: 'index_cx_need',
  							title: '技术详情',
  							id: id
  						},
  						url: './first_frame/index_cx_need.html',
  						delay: 200,
  						bounces: false
  					});
          } else if (type == 6) { // 专利
            //index_detail_zl
            api.openWin({
  						name: 'index_detail_zl',
  						pageParam: {
  							name: 'index_detail_zl',
  							title: title,
  							id: id
  						},
  						url: './first_frame/first_header.html',
  						delay: 200,
  						bounces: false
  					});
          }
        }
			}
		})


    };
  </script>
</html>
